/**
 * Created by zheng on 2018/12/16.
 */
import React from 'react'
import {
  Form, Icon, Input, Button, Checkbox
} from 'antd'
import * as action from '../../actions/UserActions'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'

const FormItem = Form.Item

class LoginForm extends React.Component {
  constructor() {
    super()
  }

  state = {
    usernameValue: ''
  }

  handleSubmit = (e) => {
    e.preventDefault()
    this.props.login({
      id: '1',
      username: this.state.usernameValue
    })
  }

  handleLogout = (e) => {
    e.preventDefault()
    this.props.logout()
  }

  onChangeUserName = (e) => {
    this.setState({usernameValue: e.target.value})
  }

  render() {
    const {user} = this.props
    return (

      <Form onSubmit={this.handleSubmit} className="login-form">
        <FormItem>
          {
            <Input prefix={<Icon type="user" style={{color: 'rgba(0,0,0,.25)'}}/>}
                   placeholder="Username"
                   value={this.state.usernameValue}
                   onChange={this.onChangeUserName}
            />
          }
        </FormItem>
        <FormItem>
          <Button type="primary" htmlType="submit" className="login-form-button">
            Log in
          </Button>
          <p>current user: {user.username}</p>
        </FormItem>
        <FormItem>
          <Button type="primary" onClick={this.handleLogout}>Logout</Button>
        </FormItem>
      </Form>
    )
  }
}

const mapStateToProps = (state, ownProps) => ({
  user: state.user
})
const mapDispatchToProps = dispatch => bindActionCreators(action, dispatch)
const MyLoginForm = connect(mapStateToProps, mapDispatchToProps)(LoginForm)

export default MyLoginForm
